<template>
  <!-- 地球表面的线和直线 -->
  <div class="page-container">
    <SelectTrigger label="折线的类型" :options="options" width="400px" />
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]); // 选项

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
    selectionIndicator: false, //
    shadows: true,
    shouldAnimate: true,
  });

  // 红色的地表线
  // 文档地址 http://cesium.xin/cesium/cn/Documentation1.62/Primitive.html?classFilter=Primitive
  viewer.scene.primitives.add(
    new Cesium.Primitive({
      // 几何体实例
      geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.PolylineGeometry({
          positions: Cesium.Cartesian3.fromDegreesArray([
            -124.0, 40.0, -80.0, 40.0,
          ]),
          width: 5.0,
          // 顶点
          vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
        }),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(
            new Cesium.Color(1.0, 0.0, 0.0, 0.8)
          ),
        },
      }),
      // 外观
      appearance: new Cesium.PolylineColorAppearance(),
    })
  );

  // 蓝色的直线
  viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.PolylineGeometry({
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            -84.0, 50.0, 0.0, -100.0, 30.0, 1000000.0,
          ]),
          width: 5.0,
          // 使用的是Ployline 矩阵坐标算法 ，如果不给就需要指定 modelMatrix（转换以将几何图形从模型坐标转换为世界坐标的模型矩阵）
          vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
          /**
           * ArcType定义连接顶点应采用的路径。
           * Cesium.ArcType.GEODESIC   
           * 
           *  Cesium.ArcType.NONE 直线
           * 
           * Cesium.ArcType.RHUMB  地表线
           */
          arcType: Cesium.ArcType.NONE, // 如果不设置就是曲线
        }),
        // 属性
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(
            Cesium.Color.BLUE
          ),
        },
      }),
      appearance: new Cesium.PolylineColorAppearance(),
    })
  );
});
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
